<template>
  <div class="swiper-add">
    <!-- 最上面标题 -->
    <div class="swiper-title">
      编辑轮播图
      <el-button class="back-btn" type="primary" @click="toManage">
        <img
          style="width: 16px; height: 16px"
          src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E9%A6%96%E9%A1%B5/u384.png"
          alt=""
        />
        <span style="margin-left: 5px">返回</span>
      </el-button>
    </div>

    <div class="main-content">
      <div class="please">请填写轮播图信息</div>

      <!-- 表单区域 -->
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
        <el-form-item label="轮播图序号" prop="id">
            <el-input
              style="width: 200px"
              v-model="ruleForm.id"
              disabled
            />
          </el-form-item>

          <el-form-item label="轮播图名称" prop="playname">
            <el-input
              style="width: 200px"
              v-model="ruleForm.playname"
              placeholder="请输入轮播图名称"
            />
          </el-form-item>

          <el-form-item label="轮播图" prop="playurl">
            <!-- <template #default="scope"> -->
            <img :src="ruleForm.playurl" style="width: 97px; height: 54px" />
            <!-- </template> -->
            <!-- <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <el-icon><Plus /></el-icon>

              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon><Download /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon><Delete /></el-icon>
                    </span>
                  </span>
                </div>
              </template> -->
            <!-- </el-upload> -->

            <!-- <el-dialog v-model="dialogVisible">
              <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog> -->
          </el-form-item>

          <el-form-item label="轮播图状态" prop="status">
            <el-switch v-model="statusA" />
          </el-form-item>

          <el-form-item label="链接" prop="playurl">
            <el-input style="width: 500px" v-model="ruleForm.playurl" />
          </el-form-item>

          <!-- <el-form-item label="上传时间" required>
              <el-col :span="11">
                <el-form-item prop="uptime">
                  <el-date-picker
                    v-model="ruleForm.uptime"
                    type="date"
                    label="Pick a date"
                    placeholder="请选择上传时间"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-form-item> -->

          <el-form-item label="上传人" prop="persion">
            <el-input style="width: 200px" v-model="ruleForm.persion" />
          </el-form-item>

          <el-form-item>
            <el-button
              class="save-btn"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              <img
                style="width: 16px; height: 16px"
                src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u710.png"
                alt=""
              />
              <span style="margin-left: 5px">保存</span>
            </el-button>
            <el-button
              class="cancel-btn"
              type="primary"
              @click="resetForm(ruleFormRef)"
            >
              <img
                style="width: 16px; height: 16px"
                src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E6%96%B0%E5%A2%9E%E8%BD%AE%E6%92%AD%E5%9B%BE/u713.png"
                alt=""
              />
              <span style="margin-left: 5px">取消</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from "../utils/http";
import { useRouter, useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import type { FormInstance, FormRules, UploadFile } from "element-plus";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElCol,
  ElDatePicker,
  ElSwitch,
  ElUpload,
  ElIcon,
  ElDialog,
} from "element-plus";

// 接收轮播图管理传的数据
const route = useRoute();
let id = route.query;
let getData = function () {
  axios({
    url: "/play/id",
    method: "get",
    params: {
      id: id.id,
    },
  }).then(({ data }) => {
    console.log("2333", data);
    if (data.code == 0) {
      ruleForm.value = data.data;
      console.log(ruleForm.value);
      odd();
    }
  });
};

onMounted(() => {
  getData();
});
let statusA = ref(false);
const odd = function () {
  if (ruleForm.value.status == 0) {
    statusA.value = false;
  } else if (ruleForm.value.status == 1) {
    statusA.value = true;
  }
};
// 正则
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
let ruleForm = ref({
  playname: "",
  playurl: "",
  status: 0,
  link: "",
  persion: "",
  id
});

// 正则
const rules = reactive<FormRules>({
  playname: [{ required: true, message: "请填写轮播图名称", trigger: "blur" }],
  // playurl: [{ required: true, message: "请上传轮播图图片", trigger: "blur" }],
  // uptime: [
  //   {
  //     type: "date",
  //     required: true,
  //     message: "请选择一个时间",
  //     trigger: "change",
  //   },
  // ],
});

// 保存编辑的
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", ruleForm.value);
      // let form={...ruleForm}
      // delete form.uptime;
      // delete form.del
      axios({
        url: "/play/update",
        method: "post",
        // params:ruleForm.value
        params:{
          id:ruleForm.value.id,
          playname:ruleForm.value.playname,        
          playurl:ruleForm.value.playurl,        
          status:ruleForm.value.status,        
          link:ruleForm.value.link,      
          persion:ruleForm.value.persion,        
        }
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          toManage()
          getData();
          
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 正则
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 正则
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

// 上传
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);
// 上传
const handleRemove = (file: UploadFile) => {
  console.log(file);
};
// 上传
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
// 上传
const handleDownload = (file: UploadFile) => {
  console.log(file);
};

// 返回轮播图管理跳转
const router = useRouter();
const toManage = function () {
  router.push({
    name: "swiperManage",
  });
};
</script>

<style lang="less" scoped>
.swiper-add {
  min-width: 1095px - 60px;
  padding: 30px;
}
// 上面标题
.swiper-title {
  font-size: 24px;
  width: 1100px - 50px;
  padding-right: 50px;
  height: 50px;
  font-weight: bold;
  color: #9137f3;
  display: flex;
  justify-content: space-between;
}
.main-content {
  width: 1055px - 60px;
  background-color: white;
  border: 1px solid #e4e4e4;
  //   height: 503px;
  padding: 0 30px;

  .please {
    width: 1055px - 60px;
    height: 50px;
    color: #909090;
    font-size: 14px;
    line-height: 50px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 20px;
  }
}
.save-btn {
  background-color: #9137f3;
  border: 1px solid #9137f3;
  color: white;
}
.cancel-btn {
  background-color: #e4e4e4;
  border: 1px solid #e4e4e4;
  color: #666666;
}
.back-btn {
  background-color: #fcfcfc;
  border: 1px solid #9137f3;
  color: #9137f3;
}
</style>
